<template>
  <div class="all">
    <div class="container">
      <div class="containerTop">
        <div class="containerTopName">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">推送类型</div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">子类型</div>
            </el-col>
            <el-col :span="9">
              <div class="grid-content bg-purple">相关人员</div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <!-- <DataRefresh class="dataStatisticsButton" /> -->
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="addData">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-input v-model="input" placeholder="请输入内容" :disabled="true"></el-input>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-select v-model="value" placeholder="请选择子类型" @change="subtypes(value)">
                  <el-option
                    v-for="(item, index) in influenceCategory"
                    :key="index"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="9">
              <div class="grid-content bg-purple">
                <el-input v-model="personList" placeholder="请选择相关人员" @focus="Relevanper"></el-input>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-button type="primary" @click.stop="add" class="buttonStyle">添加</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="containerButtom">
        <div v-for="(item, index) in ListAsyncList" :key="index" class="containerButtomList">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <div>
                  <p>严重程度</p>
                </div>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <div class="containerButtomListCenter">
                  <p>{{ item.severityTitle }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="9">
              <div class="grid-content bg-purple">
                <div class="containerButtomListRight">
                  <p v-for="(item2, index2) in item.userInfo" :key="index2">
                    <span class="name">{{ item2.name }}；</span>
                  </p>
                  <!-- <el-button type="primary"
                             class="theEditor"
                             @click.stop="clickLie(index)">编辑</el-button>
                  <div class="personList">
                    <p v-for="(list, i) in item.userInfo"
                       :key="i">
                      <span class="userName">{{ list.userName }}</span>
                      <span class="name">{{ list.name }}</span>
                      <span class="department">{{ list.department }}</span>
                      <span class="email">{{ list.email }}</span>
                    </p>
                  </div> -->
                </div>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-button type="primary" @click.stop="onActionConfirm(item.id, modalType.delete)" class="buttonStyle"
                  >删除</el-button
                >
                <el-button type="primary" @click.stop="toView(index)" class="buttonStyle">查看</el-button>
                <el-button type="primary" @click.stop="clickLie(index)" class="buttonStyle">编辑</el-button>
                <!-- <el-button type="primary"
                           @click.stop="onActionConfirm(item.id, modalType.delete)"
                           class="buttonStyle">删除</el-button>
                <el-button type="primary"
                           @click.stop="save(item.severity, item.id, item.userInfo)"
                           v-if="jiaodian === index"
                           class="buttonStyle">保存</el-button> -->
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-dialog :visible.sync="relevantPersonnel" :close-on-click-modal="false" class="reciverDialog">
        <el-table
          height="360"
          ref="multipleSelection"
          :data="
            tableData.filter(
              data =>
                !search ||
                data.name.toLowerCase().includes(search.toLowerCase())
                  | data.userName.toLowerCase().includes(search.toLowerCase())
            )
          "
          :row-key="row => row.id"
          @selection-change="handleSelectionChange"
          tooltip-effect="dark"
        >
          <el-table-column label="C2表" align="right" label-class-name="searchHead">
            <template slot="header">
              <el-input v-model="search" clearable style="width:220px;" size="mini" placeholder="输入关键字搜索" />
            </template>
            <el-table-column type="selection" :reserve-selection="true"> </el-table-column>
            <el-table-column prop="userName" label="OA号"> </el-table-column>
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column prop="department" label="部门"> </el-table-column>
            <el-table-column prop="email" label="邮箱"> </el-table-column>
          </el-table-column>
        </el-table>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm">确认</el-button>
        </span>
      </el-dialog>
      <el-dialog :visible.sync="relevantPersonnelFour" :close-on-click-modal="false" class="reciverDialog" width="70%">
        <el-table height="660" :data="staffList">
          <el-table-column prop="userName" label="OA号"> </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="department" label="部门"> </el-table-column>
          <el-table-column prop="email" label="邮箱"> </el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog :visible.sync="Modify" :close-on-click-modal="false" width="26%">
        <div class="addlietop">
          操作提示<span style="float: right; color: #666666" @click.stop="ModifyCancel">x</span>
        </div>
        <div class="addlietcen">
          <p>你的子类型或者相关人员为空</p>
        </div>
        <div class="addliebot">
          <button @click.stop="ModifyCancel">取消</button>
          <button style="background: #3579e0" @click.stop="ModifyConfirm">
            确定
          </button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="relevantPersonnelTwo" class="reciverDialog" :close-on-click-modal="false" width="70%">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <div>
                <el-tag
                  :key="tag"
                  v-for="tag in dynamicTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                >
                  {{ tag.name }}
                </el-tag>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-table
                height="480"
                ref="multipleSelectionTwo"
                :data="
                  tableData.filter(
                    data =>
                      !search ||
                      data.name.toLowerCase().includes(search.toLowerCase())
                        | data.userName.toLowerCase().includes(search.toLowerCase())
                  )
                "
                :row-key="row => row.id"
                @selection-change="handleSelectionChangeTwo"
                tooltip-effect="dark"
              >
                <el-table-column label="C2表" align="right" label-class-name="searchHead">
                  <template slot="header">
                    <el-input
                      v-model="search"
                      clearable
                      style="width:220px;"
                      size="mini"
                      placeholder="输入关键字搜索"
                    />
                  </template>
                  <el-table-column type="selection" :reserve-selection="true"> </el-table-column>
                  <el-table-column prop="userName" label="OA号"> </el-table-column>
                  <el-table-column prop="name" label="姓名"> </el-table-column>
                  <el-table-column prop="department" label="部门"> </el-table-column>
                  <el-table-column prop="email" label="邮箱"> </el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelTwo">取消</el-button>
          <el-button type="primary" @click="confirmTwo">确认</el-button>
        </span>
      </el-dialog>
      <CommonDialog ref="CommonDialog" />
    </div>
  </div>
</template>

<script>
import CommonDialog from '@/components/deleteDialog/deleteDialog.vue'
import { MessageSet, User } from '@/api/setting/service.js'
import { FeedBack } from '../../api/feedBack/server'
// import DataRefresh from './dataRefresh.vue'
export default {
    components: {
        CommonDialog
        // DataRefresh
    },
    data() {
        return {
            // 查看弹出框
            relevantPersonnelFour: false,
            // 新建 人员弹出框
            relevantPersonnel: false,
            // 编辑 人员弹出框
            relevantPersonnel1: false,
            // 推送类型绑定值
            input: '严重程度',
            // 相关人员列表
            personList: '',
            // 搜索输入框
            search: '',
            // 所有消息设置管理信息数据
            ListAsyncList: [],
            // 点击的所有信息数据的索引
            jiaodian: '',
            // 操作提示弹窗
            Modify: false,
            // 子类型数据列表
            influenceCategory: [],
            // 编辑 所选人员
            multipleSelectionTwoCopy: [],
            // 子类型value 值
            value: '',
            // 相关人员id的集合
            ID: '',
            // 所选择数据的索引
            selectIndex: '',
            // 人员数据列表
            tableData: [],
            // 新建人员列表
            multipleSel: [],
            // 查看人员列表
            staffList: [],
            // 编辑人员列表
            multipleSelection: [],
            // 编辑 人员弹出框
            relevantPersonnelTwo: false,
            // 编辑所选的人员列表
            multipleSelectione: [],
            // 标签列表
            dynamicTags: [],
            // 删除按钮弹出框
            modalType: {
                delete: {
                    type: 'delete',
                    tipInfo: '确定要删除该条数据吗？',
                    btnText: '删除',
                    callBack: 'dellist'
                }
            }
        }
    },
    mounted() {
        this.getCategory()
        this.getUserList()
        this.getMarketProjectFirstList('IMPACT_CATEGORY')
    },
    methods: {
    /**
     * @description: 删除选中列表的某一个
     * @param {Object} tag
     */
        handleClose(tag) {
            // console.log(tag)
            const index = this.tableData.findIndex(_item => {
                return _item.id == tag.id
            })
            // console.log(index)
            this.$nextTick(() => {
                this.$refs.multipleSelectionTwo.toggleRowSelection(this.tableData[index], false)
            })
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
            // console.log(this.dynamicTags)
        },
        /**
     * @description: 编辑相关人员
     * @param {Array} val 人员列表
     */
        handleSelectionChangeTwo(val) {
            this.multipleSelectionTwoCopy = val
            // console.log(val)
            this.dynamicTags = val
        },
        /**
     * @description: 取消编辑相关人员
     */
        cancelTwo() {
            this.$refs.multipleSelectionTwo.clearSelection()
            this.relevantPersonnelTwo = false
            this.multipleSelectionTwoCopy = []
        },

        /**
     * @description: 确认编辑相关人员
     */
        confirmTwo() {
            if (this.multipleSelectionTwoCopy.length != 0) {
                this.relevantPersonnelTwo = false
                this.ListAsyncList[this.jiaodian].userInfo = this.multipleSelectionTwoCopy
                console.log(this.ListAsyncList[this.jiaodian])
                this.Save(this.jiaodian)
                this.$refs.multipleSelectionTwo.clearSelection()
            } else {
                this.$message.error('请添加相关人员')
            }
        },
        /**
     * @description: 点击查看
     * @param {Number} index 索引
     */
        toView(index) {
            // console.log(index)
            // console.log(this.ListAsyncList[index])
            this.relevantPersonnelFour = true
            this.staffList = this.ListAsyncList[index].userInfo
        },
        /**
     * @description: 删除某一条数据的弹出框
     * @param {Number} index 删除数据的索引值
     * @param {Array} _modalInfo 删除弹出框的文字信息和确认按钮调用的事件
     */
        onActionConfirm(index, _modalInfo) {
            this.$refs.CommonDialog.Show(_modalInfo.type, _modalInfo.tipInfo, _modalInfo.btnText, () => {
                this.$refs.CommonDialog.OnHandleCancel()
                this[_modalInfo.callBack](index)
            })
        },

        /**
     * @description: 影响类别列表
     * @param {String} type 传入的type值
     */
        async getMarketProjectFirstList(type) {
            try {
                const result = await FeedBack.FormOptionGetListItemAsync({
                    type: type
                })
                if (result.success) {
                    this.influenceCategory = result.data
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 编辑某条数据弹出所有人员弹出框
     * @param {Number} index 索引值
     */
        clickLie(index) {
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            this.getUserList().then(() => {
                let data = []
                this.jiaodian = index
                this.relevantPersonnelTwo = true
                loading.close()
                this.selectIndex = index
                data = this.ListAsyncList[index].userInfo
                this.dynamicTags = this.ListAsyncList[index].users
                data.forEach(element => {
                    const selectIndex = this.tableData.findIndex(_item => {
                        return _item.id == element.id
                    })
                    this.$nextTick(() => {
                        this.$refs.multipleSelectionTwo.toggleRowSelection(this.tableData[selectIndex])
                    })
                })
            })
        },

        /**
     * @description: 编辑相关人员弹出框的确认按钮
     */
        confirme() {
            this.relevantPersonnel1 = false
            const index = this.selectIndex
            this.ListAsyncList[index].userInfo = this.multipleSelectione
            this.jiaodian = index
            this.selectIndex = ''
            this.getUserList()
            this.search = ''
        },

        /**
     * @description: 编辑相关人员弹出框的取消按钮
     */
        cancele() {
            this.relevantPersonnel1 = false
            this.selectIndex = ''
            this.search = ''
        },

        /**
     * @description: 获取所有人员数据
     */
        async getUserList() {
            try {
                const result = await User.UserGetAllUserAsync()
                if (result.success) {
                    this.tableData = result.data
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },

        /**
     * @description: 异步获取所有消息设置管理信息
     */
        async getCategory() {
            try {
                const result = await MessageSet.MessageSetGetAllMessageAsync()
                if (result.success) {
                    // for (var i = 0; i < result.data.length; i++) {
                    //     const item = result.data[i]
                    //     if (item.severity == 'AffectProduction') {
                    //         item.severity = '影响现场生产'
                    //     } else if (item.severity == 'AffectCheck') {
                    //         item.severity = '影响验收'
                    //     } else if (item.severity == 'AffectReturned') {
                    //         item.severity = '影响汇款'
                    //     }
                    // }
                    this.ListAsyncList = result.data
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },

        /**
     * @description: 新建子类型状态码
     * @param {Number} index 索引值
     */
        subtypes(index) {
            console.log('subtypes', index, this.value)
        },

        /**
     * @description: 相关人员选择
     * @param {Array} val 勾选的人员数组
     */
        handleSelectionChange(val) {
            this.multipleSelection = val
        },

        /**
     * @description: 新建弹出相关人员框
     */
        Relevanper() {
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            this.getUserList().then(() => {
                this.relevantPersonnel = true
                loading.close()
                const data = this.multipleSel
                data.forEach(element => {
                    const index = this.tableData.findIndex(_item => {
                        return _item.id == element.id
                    })
                    console.log(index)
                    this.$nextTick(() => {
                        this.$refs.multipleSelection.toggleRowSelection(this.tableData[index])
                    })
                })
            })
        },

        /**
     * @description: 新建勾选相关人员
     * @param {Array} val 勾选的人员数组
     */
        handleSelectionChangee(val) {
            this.multipleSelectione = val
        },

        /**
     * @description: 新建相关人员确认按钮
     */
        confirm() {
            this.relevantPersonnel = false
            const idArr = this.multipleSelection
            this.multipleSel = this.multipleSelection
            let id = ''
            let name = ''
            for (var i = 0; i < idArr.length; i++) {
                const str = idArr[i].id
                const strN = idArr[i].name
                id += str + ','
                name += strN + ','
            }
            id = id.substr(0, id.length - 1)
            name = name.substr(0, name.length - 1)
            this.ID = id
            this.personList = name
            this.getUserList()
            this.search = ''
        },

        /**
     * @description: 新建相关人员取消按钮
     */
        cancel() {
            this.relevantPersonnel = false
            this.search = ''
        },

        /**
     * @description: 添加一条消息数据
     */
        async add() {
            if (this.value != '' && this.personList != '') {
                const arr = {
                    severity: this.value,
                    users: this.ID
                }
                try {
                    const result = await MessageSet.MessageSetInsertAsync(arr)
                    if (result.success) {
                        this.getCategory()
                        this.value = ''
                        this.personList = ''
                        this.ID = ''
                        this.multipleSel = []
                        this.$refs.multipleSelection.clearSelection()
                        this.$message.success(result.message)
                    } else {
                        this.getCategory()
                        this.$message.error(result.message)
                    }
                } catch (err) {
                    this.getCategory()
                    this.$message.error('服务器异常')
                }
            } else {
                this.$message.error('未选择子类型或相关人员')
            }
        },

        /**
     * @description: 删除一条消息数据
     * @param {String} id 删除数据的id
     */
        async dellist(id) {
            const uuid = id
            try {
                const result = await MessageSet.MessageSetDeleteAsync({ id: uuid })
                if (result.success) {
                    this.getCategory()
                    this.$message.success(result.message)
                } else {
                    this.getCategory()
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },

        /**
     * @description: 修改消息数据 保存
     * @param {String} severity 状态码
     * @param {String} id id
     * @param {Array} userInfo 人员列表
     */
        async Save(index) {
            const array = this.ListAsyncList[index]
            const userInfo = array.userInfo
            const id = array.id
            const severity = array.severity
            let uuid = ''
            for (var i = 0; i < userInfo.length; i++) {
                const str = userInfo[i].id
                uuid += str + ','
            }
            uuid = uuid.substr(0, uuid.length - 1)
            if (uuid === '') {
                this.$message.error('相关人员为空')
            } else {
                const arr = {
                    id: id,
                    severity: severity,
                    users: uuid
                }
                try {
                    const result = await MessageSet.MessageSetUpdateAsync(arr)
                    if (result.success) {
                        this.getCategory()
                        this.jiaodian = ''
                        this.multipleSelectionTwoCopy = []
                        this.$message.success(result.message)
                    } else {
                        this.getCategory()
                        this.$message.error(result.message)
                    }
                } catch (err) {
                    this.$message.error('服务器异常')
                }
            }
        },

        /**
     * @description: 点击操作提示取消按钮
     */
        ModifyCancel() {
            this.Modify = false
        },

        /**
     * @description: 点击操作提示确认按钮
     */
        ModifyConfirm() {
            this.Modify = false
        }
    }
}
</script>
<style lang="less" scoped src="@/assets/style/setting.less"></style>
<style lang="less" scoped>
::v-deep .el-dialog__footer {
  height: 70px;
}
.container {
  height: 815px;
  margin: 30px;
  background: #ffffff;
  border: 1px solid #dcdfe4;
  box-shadow: 0px 2px 5px 0px rgba(56, 61, 71, 0.2);
  border-radius: 5px;
  padding: 30px;
  .containerTop {
    .containerTopName {
      height: 40px;
      border-bottom: 1px solid #c8cdd5;
      p {
        display: inline-block;
      }
      .pushType {
        margin-left: 30px;
      }
      .subtypes {
        margin-left: 240px;
      }
      .relevantPersonnel {
        margin-left: 270px;
      }
      .dataStatisticsButton {
        float: right;
        margin-right: 10px;
      }
    }
    .addData {
      line-height: 50px;
      border-bottom: 1px solid #c8cdd5;
      padding: 10px 0;
      .el-input {
        width: 100%;
      }
      .el-select {
        width: 100%;
      }
    }
  }
  .containerButtom {
      height: 675px;
      overflow-y: auto;
      overflow-x: hidden;
    .containerButtomList {
      height: 160px;
      padding: 10px 0;
      border-bottom: 1px solid #c8cdd5;
    }
    .containerButtomListCenter {
      overflow: auto;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .containerButtomListRight {
      width: 100%;
      height: 150px;
      background: #ffffff;
      border: 1px solid #dcdfe5;
      border-radius: 5px;
      display: inline-block;
      vertical-align: top;
      padding: 20px;
      box-sizing: border-box;
      margin-top: 10px;
      p {
        border-radius: 30px;
        display: inline-block;
        margin-left: 2px;
      }
    }
  }
}

.buttonStyle {
  width: 70px;
  height: 30px;
  background: #eaf2ff;
  border: 1px solid #3579e0;
  border-radius: 5px;
  color: #3579e0;
  line-height: 8px;
}
.relevantPerson {
  width: 100%;
  height: 405px;
  background: #ffffff;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0px 2px 20px 0px rgba(21, 32, 41, 0.22);
  border-radius: 5px;
  .relevantPersonInput {
    width: 270px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    margin-top: 10px;
  }
  .sousuo {
    width: 100px;
    height: 40px;
    background: #3579e0;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .relevantPersonInputCen {
    width: 100%;
    height: 254px;
    background: #f7f7f7;
    opacity: 0.7;
    border: 1px solid #000;
    border-radius: 5px;
    overflow-y: auto;
  }
  .relevantPersonInputBot {
    button {
      width: 138px;
      height: 30px;
      background: #ffffff;
      border: 1px solid #bfbfbf;
      border-radius: 15px;
      margin-top: 20px;
    }
    .relevantPersonCan {
      margin-left: 220px;
    }
    .relevantPersonCon {
      margin-left: 30px;
      color: #ffffff;
      background: #3579e0;
    }
  }
}
.el-input {
  width: 280px;
}
.el-select {
  width: 280px;
}
.el-button {
  float: right;
  margin-right: 10px;
  margin-top: 10px;
}
.el-col-5 {
  overflow-x: auto;
}
.el-col-9 {
  overflow-x: auto;
}
.addlietop {
  width: 311px;
  border-bottom: 1px solid #3579e0;
  font-weight: 400;
  font-size: 22px;
  margin-top: 20px;
  margin-left: 30px;
  font-style: normal;
  color: #333;
  line-height: normal;
}
.addlietcen {
  font-size: 16px;
  font-weight: 400;
  height: 80px;
  font-style: normal;
  color: #333;
  line-height: 80px;
  display: block;
  margin-left: 30px;
  margin-top: 20px;
}
.addliebot {
  margin-top: 30px;
  button {
    width: 138px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #bfbfbf;
    border-radius: 15px;
    margin: 0 25px;
  }
}
::v-deep .el-select--small {
  height: 55px;
}
</style>
